import Taro from '@tarojs/taro';
import {View} from "@tarojs/components";
import './index.scss'
import {AtIcon} from "taro-ui";

const TabBarHeight = Taro.pxTransform(100,750);
/** title = 首页 | 发票 | 我的*/
const TabBar = ({title}) => {
  const tabBarTitleList = ['首页','发票','我的'];
  const tabBarTitlePath = [
    '/pages/home/index',
    '/pages/invoice/index',
    '/pages/me/index',
  ];
  const onClickItem = (titleIndex) => {
    let path = tabBarTitlePath[titleIndex];
    Taro.navigateTo({url:path}).then((e) => {});
  }

  let indexOfTitle = tabBarTitleList.indexOf((title || ''))
  let tabBarStyle = {
    height: TabBarHeight
  }
  if (title === '首页'){
    return <View style={tabBarStyle} className='tabBar'>
      <View className='tabBar-index-selected' onClick={() => onClickItem(0)}>
        <AtIcon value='home' color='green' size={20} />
        <View className='tabBar-title'>{tabBarTitleList[0]}</View>
      </View>
      <View className='tabBar-invoice' onClick={() => onClickItem(2)}>
        <AtIcon value='credit-card' color='green' size={20} />
      </View>
    </View>
  }
  return <View style={tabBarStyle} className='tabBar'>
    <View className='tabBar-item' onClick={() => onClickItem(0)}>{tabBarTitleList[0]}</View>
    <View className='tabBar-item' onClick={() => onClickItem(1)}>{tabBarTitleList[1]}</View>
    <View className='tabBar-item' onClick={() => onClickItem(2)}>{tabBarTitleList[2]}</View>
  </View>
}
export {TabBar, TabBarHeight}
